﻿@using Grand.Core;
@model PublicInfoModel
@inject IWorkContext workContext
@{
    var supportRtl = workContext.WorkingLanguage.Rtl;
    if (supportRtl)
    {
        Html.AppendScriptParts(ResourceLocation.Footer, "~/Plugins/Widgets.Slider/Content/slider.rtl.js");
        Html.AddCssFileParts(ResourceLocation.Head, "~/Plugins/Widgets.Slider/Content/style.rtl.css");
    } else
    {
        Html.AppendScriptParts(ResourceLocation.Footer, "~/Plugins/Widgets.Slider/Content/slider.js");
        Html.AddCssFileParts(ResourceLocation.Head, "~/Plugins/Widgets.Slider/Content/style.css");
    }
}
<div id="GrandCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
    <ol class="carousel-indicators">
        @foreach (var item in Model.Slide)
        {
            if (!string.IsNullOrEmpty(item.PictureUrl))
            {
                <li data-target="#GrandCarousel" data-slide-to="" class="active"></li>
            }
        }
    </ol>
    <div class="carousel-inner">
        @foreach (var item in Model.Slide)
        {
            if (string.IsNullOrEmpty(item.PictureUrl))
            {
                //without background
                if (item.FullWidth)
                {
                    <div class="carousel-item img-desc wide-img ">
                        <div class="carousel-caption">
                            @Html.Raw(item.Description)
                        </div>
                    </div>
                }
                else
                {
                    <div class="carousel-item img-desc no-wide-img">
                        <div class="container">
                            <div class="carousel-caption">
                                @Html.Raw(item.Description)
                            </div>
                        </div>
                    </div>
                }

            }
            else
            {
                //with background
                if (item.FullWidth)
                {
                    <div class="carousel-item wide-img with-bg" @if (!string.IsNullOrEmpty(item.Link)) { <text> onclick="window.location='@item.Link'" </text> }>
                        <a>
                            <picture>
                                <source media="(max-width: 767px)" sizes="1px" srcset=" 1w" />
                                <img class="d-block img-fluid" src="@item.PictureUrl" data-thumb="@item.PictureUrl" data-transition="" alt="@item.Name" title="" />
                            </picture>
                        </a>
                        <div class="carousel-caption d-none d-md-block">
                            @Html.Raw(item.Description)
                        </div>
                    </div>
                }
                else
                {
                    <div class="carousel-item no-wide-img with-bg" @if (!string.IsNullOrEmpty(item.Link)) { <text> onclick="window.location='@item.Link'" </text> }>
                        <div class="container">
                            <a>
                                <picture>
                                    <source media="(max-width: 767px)" sizes="1px" srcset=" 1w" />
                                    <img class="d-block img-fluid" src="@item.PictureUrl" data-thumb="@item.PictureUrl" data-transition="" alt="" title="@item.Name">
                                </picture>
                            </a>
                            <div class="carousel-caption container d-none d-md-block">
                                @Html.Raw(item.Description)
                            </div>
                        </div>
                    </div>
                }
            }
        }
    </div>
    <a class="carousel-control-prev" href="#GrandCarousel" role="button" data-slide="prev">
        <span class="mdi mdi-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#GrandCarousel" role="button" data-slide="next">
        <span class="mdi mdi-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>